<template>
    <div class="addOnDuty">
        <div class="add_box">
            <div class="title">
                <div class="breadcrumb">
                    <div class="breadcrumb__item breadcrumb__item--center" @click="back()">资产管理</div>
                    <div class="breadcrumb__item">/</div>
                    <div class="breadcrumb__item breadcrumb__item--center">
                        新增值班排班
                    </div>
                </div>
                <div class="breadcrumbBtn">
                    <div class="btn_ative" @click="handleConfirm()">
                        <img class="operation_btn" src="@/assets/images/images_new/save_icon.png" alt="">
                        <span>保存</span>
                    </div>
                    <div class="btn_ative" @click="back()">
                        <img class="operation_btn" src="@/assets/images/images_new/back_icon.png" alt="">
                        <span>返回</span>
                    </div>
                </div>
            </div>
            <div class="add_content">
                <div>
                    <span>*需先进行班组配置后才可进行排班管理</span>
                    <span class="scheduling_time">排班时间</span>
                    <el-date-picker v-model="date" type="monthrange" range-separator="-" start-placeholder="开始月份"
                        end-placeholder="结束月份" unlink-panels />
                </div>
                <el-table ref="tableRef" :data="tableData.list" style="width:600px;" border stripe max-height="650">
                    <el-table-column property="date" label="日期/班次" width="150px" />
                    <el-table-column property="nightShift" label="夜班" width="150px">
                        <template #default="scope: any">
                            <el-dropdown popper-class="dropdown_onDuty_popper" @command="(val:any) => nightShiftChange(val, scope.$index)">
                                <span class="el-dropdown-link">
                                    {{ scope.row.nightShift }}
                                    <i-ep-arrowDown class="arrowDown" />
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="一值" :class="{'active':scope.row.nightShift=='一值'}">一值</el-dropdown-item>
                                        <el-dropdown-item command="二值" :class="{'active':scope.row.nightShift=='二值'}">二值</el-dropdown-item>
                                        <el-dropdown-item command="三值" :class="{'active':scope.row.nightShift=='三值'}">三值</el-dropdown-item>
                                        <el-dropdown-item command="四值" :class="{'active':scope.row.nightShift=='四值'}">四值</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                    <el-table-column property="middleShift" label="中班" width="150px">
                        <template #default="scope: any">
                            <el-dropdown popper-class="dropdown_onDuty_popper" @command="(val:any) => middleShiftChange(val, scope.$index)">
                                <span class="el-dropdown-link">
                                    {{ scope.row.middleShift }}
                                    <i-ep-arrowDown class="arrowDown" />
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="一值" :class="{'active':scope.row.nightShift=='一值'}">一值</el-dropdown-item>
                                        <el-dropdown-item command="二值" :class="{'active':scope.row.nightShift=='二值'}">二值</el-dropdown-item>
                                        <el-dropdown-item command="三值" :class="{'active':scope.row.nightShift=='三值'}">三值</el-dropdown-item>
                                        <el-dropdown-item command="四值" :class="{'active':scope.row.nightShift=='四值'}">四值</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                    <el-table-column property="dayShift" label="白班" width="150px">
                        <template #default="scope: any">
                            <el-dropdown popper-class="dropdown_onDuty_popper" @command="(val:any) => dayShiftChange(val, scope.$index)">
                                <span class="el-dropdown-link">
                                    {{ scope.row.dayShift }}
                                    <i-ep-arrowDown class="arrowDown" />
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="一值" :class="{'active':scope.row.nightShift=='一值'}">一值</el-dropdown-item>
                                        <el-dropdown-item command="二值" :class="{'active':scope.row.nightShift=='二值'}">二值</el-dropdown-item>
                                        <el-dropdown-item command="三值" :class="{'active':scope.row.nightShift=='三值'}">三值</el-dropdown-item>
                                        <el-dropdown-item command="四值" :class="{'active':scope.row.nightShift=='四值'}">四值</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import router from '@/routes';

let date = ref("");

//返回
const back = () => {
    router.go(-1);
}

//保存
const handleConfirm = () => {

}

let tableData = reactive({
    list: [
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '四值', dayShift: "一值", middleShift: "二值" },
        { date: '05-01', nightShift: '', dayShift: "", middleShift: "" },
        { date: '05-01', nightShift: '', dayShift: "", middleShift: "" },

    ]
})

const nightShiftChange = (val: any, index: number) => {
    // console.log('126',val,index);
    tableData.list[index].nightShift = val;
}

const middleShiftChange= (val: any, index: number) => {
    tableData.list[index].middleShift = val;
}

const dayShiftChange = (val: any, index: number) => {
    tableData.list[index].dayShift = val;
}
</script>

<style lang="scss" scoped>
.addOnDuty {
    background-color: #e5e5e5;
    // height: 100%;
    min-height: calc(100% - 30px);


    .add_box {
        margin: 0 15px;
        height: 100%;
        display: flex;
        flex-direction: column;

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            height: 85px;
            background: rgb(255, 255, 255);
            border-radius: 0px 0px 8px 8px;
            padding-left: 30px;

            .breadcrumb {
                width: 320px;
                height: 38px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 10px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                font-size: 16px;
                font-weight: 400;

                .breadcrumb__item {
                    display: flex;
                    align-items: center;

                    &:first-child {
                        cursor: pointer;
                        color: rgb(151, 151, 151);
                    }
                }

                .breadcrumb__item--center {
                    flex: 1;
                    justify-content: center;
                }
            }

            .breadcrumbBtn {
                margin-right: 42.5px;
                display: flex;

                .btn_ative {
                    width: auto;
                    height: 35px;
                    line-height: 35px;
                    cursor: pointer;
                    display: inline-block;
                    margin-right: 18px;
                    display: flex;
                    align-items: center;
                    color: #353535;
                    font-size: 14px;
                    padding: 0 8px;

                    &:last-child {
                        margin-right: 0;
                    }

                    &:hover {
                        background: rgba(0, 0, 0, 0.1);
                        border-radius: 2px;
                    }

                    .operation_btn {
                        height: 20px;
                        margin-right: 7px;
                    }
                }

            }
        }

        .add_content {
            flex: 1;
            background-color: #fff;
            border-radius: 8px;
            padding: 10px 15px;

            .scheduling_time {
                margin: 0 10px 0 30px;
            }

            .el-table {
                margin-top: 20px;
            }
        }
    }


}

:deep(.el-table) {
    .cell {
        display: flex;
        align-items: center;
    }
}

:deep(.el-date-editor) {
    border: none;

}

.el-dropdown {
    // color: #fff;
    width: 100%;

    .el-dropdown-link {
        // display: flex;
        // align-items: center;
        // flex-basis: 80%;
        // justify-content: space-between;
        display: inline-block;
        width: 60%;
        position: relative;
        &:focus-visible {
            outline: none;
        }
        svg {
            vertical-align: middle;
            // position: absolute;
            // right: 0;
            // bottom: 0;
            float: right;
        }
    }

    &:focus-visible {
        outline: none;
    }
}
</style>
<style lang="scss">
.el-popper {
    .in-range {
        &.start-date {
            color: rgb(192, 164, 91);
        }

        &.end-date {
            color: rgb(192, 164, 91);
        }
    }

}
.dropdown_onDuty_popper {
   width: 120px;
  
   .el-dropdown-menu__item {
    text-align: center;
    &.active {
        color: rgb(192, 164, 91);
    }
   }
}
</style>
